<template>
  <div class="reset-container">
    <div class="title">
       <span>
          <span>
          <img src="@/assets/logo2.png"/>
        </span>
        <span class="sp2"></span>
        <span class="sp3">企业端</span>
       </span>
      <span class="btn" @click="login">
        返回登入
        <i class="el-icon-arrow-right"></i>
      </span>
    </div>


    <div v-if="!isEdit" class="conpane">
      <el-form :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机号：" prop="phone">
          <el-input v-model="ruleForm.phone" placeholder="输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="短信验证码：" prop="smsCode" style="margin-bottom: 0;">
          <div class="p2">
           <span class="sp2-input">
              <el-input class="cc" v-model="ruleForm.smsCode" placeholder="输入短信验证码" style="width: 100%">
            </el-input>
           </span>
            <span class="sp1"></span>
            <span class="sp2">
                    <el-link class="minLH " type="warning" @click="sendCode">获取验证码</el-link>
                </span>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button class="sp3-btn" type="primary" @click="next" :disabled="loading">下一步</el-button>
          <div class="sp4">
            <span>手机已不在使用</span>
            <span><el-link class="minLH" type="warning" @click="jiejue">点击此处解决</el-link></span>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div v-else class="conpane">
      <el-form :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="输入密码：">
          <el-input v-model="ruleForm.password1" type="password" placeholder="输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="smsCode" style="margin-bottom: 0;">
          <el-input v-model="ruleForm.password2" type="password" placeholder="重新输入新密码" style="width: 100%">
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="sp3-btn" type="primary" @click="toReset">确认</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import {validUsername} from '@/utils/validate'
  import {trace} from "../../utils/trace"
  import {AES_CBC_encrypt} from "../../utils/aes"

  export default {
    name: 'reset',
    data() {

      var isSome = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        isEdit: false,
        loading:false,

        ruleForm: {
          phone: "",
          smsCode: "",

          password1: "",
          password2: "",

          token:""
        },
        rules: {
          password1: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16,  trigger: 'blur'}
          ],
          password2: [
            {required: true, message: '请确认密码', trigger: 'blur'},
            {type:'text', validator: isSome,  trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            { pattern: /^1[3-9]\d{9}$/, message: '长度在11 个数字'}
          ],
          smsCode: [
            {message: '请输入短信验证码', trigger: 'blur'},
            {min: 4, max: 6, message: '长度在 4到 6 个字符', trigger: 'blur'}
          ],
        }
      }
    },
    mounted: function () {

    },
    watch: {
      $route: {
        handler: function (route) {
          this.redirect = route.query && route.query.redirect
        },
        immediate: true
      }
    },
    methods: {

      sendCode:function(){    //发送短信验证码
        let reg = /^1[345789]\d{9}$/
        if (!reg.test(this.ruleForm.phone)) {
          new Error('请输入正确的11位手机号');
          return;
        }else {
          // this.ruleForm.isSend=true;
          this.$store.dispatch('user/smsCode', {phone:this.ruleForm.phone}).then((data) => {
            trace("reset-code", data);
            this.ruleForm.smsCode=data.code;

            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        }
      },

      login: function () {

        this.$router.push({path: '/login'})
      },
      next: function () {
        this.isEdit = true;
        // this.ruleForm.isSend=true;
        this.$store.dispatch('user/pwdtoken', {phone:this.ruleForm.phone,code:this.ruleForm.smsCode}).then((data) => {
          trace("reset-code  token", data);
          this.ruleForm.token=data.token;

          this.loading = false
        }).catch(() => {
          this.loading = false
        })
      },
      jiejue: function () {

      },
      toReset: function () {

        this.$store.dispatch('user/pwdreset', {token:this.ruleForm.token,password:AES_CBC_encrypt(this.ruleForm.password1)}).then((data) => {
          trace("reset-code toReset", data);
          this.loading = false

          this.$router.push({path: '/login'})
        }).catch(() => {
          this.loading = false
        })
      },

    }
  }
</script>

<style lang="scss">
  /* 修复input 背景不协调 和光标变色 */
  /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

  $bg: #283443;
  $light_gray: black;
  $cursor: black;


  @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
    .register-container .el-input input {
      color: $cursor;
    }
  }

  /* reset element-ui css */
  .register-container {

    .el-input {
      display: inline-block;
      height: 47px;
      width: 85%;

      input {
        background: transparent;
        -webkit-appearance: none;
        border-radius: 5px;
        padding: 12px 5px 12px 15px;
        color: $light_gray;
        height: 47px;
        caret-color: $cursor;

        &:-webkit-autofill {
          box-shadow: 0 0 0px 1000px $bg inset !important;
          -webkit-text-fill-color: $cursor !important;
        }
      }
    }

    .el-form-item {
      /*border: 1px solid rgba(0, 0, 0, 0.3);*/
      /*background: transparent;*/
      /*border-radius: 5px;*/
      color: black;
    }
  }
</style>

<style lang="scss" scoped>
  $bg: white;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $main_color: #134bde;

  .reset-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .title {
      position: relative;
      width: 100%;
      background-color: #134bde;
      color: white;
      padding: 1rem 3rem;
      display: flex;
      height: 6rem;
      align-items: baseline;
      justify-content: space-between;

      img {
        width: 6rem;
      }
      .sp2 {
        width: 1px;
        background-color:#F0F0F0;
        height: 63%;
        margin: 0 1rem;
      }
      .sp3 {
        font-size: 1.2rem;
        font-weight: bold;
      }

      .btn {
        cursor: pointer;
      }
    }

    .conpane {
      margin: 3rem auto;
      width: 650px;
      max-width: 90%;

      img {
        width: 100%;
        height: auto;
      }

      .p2 {
        width: 100%;
        border: 1px solid #DCDFE6;
        border-radius: 5px;
        display: flex;

        .sp1 {
          margin: 5px;
          width: 1px;
          background-color: #DCDFE6;
        }

        .sp2 {
          margin: auto;
        }

        .sp2-input {
          width: 75%;

        }
      }

      .sp3-btn {
        width: 100%;
        height: 3rem;
        margin-top: 2rem;
      }

      .sp4 {
        position: relative;
        text-align: center;
      }

      .minLH {
        line-height: 1.5rem;
      }

    }

  }
</style>
<style>

  .sp2-input input{
    border: none;
  }
</style>

